import React, {Component} from 'react';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import {connect} from 'dva';
import {routerRedux} from 'dva/router';
import constants from '../../../common/constants';
import {powerControl} from '../../../utils/powerControl';


import  OptionInfo from '../../../components/Order/optionInfo/OptionInfo';
import  styles from './OrderManage.less';
import  OrderManageTable from '../../../components/Order/index';
import {hashHistory, Link} from 'react-router';

import {
    Tooltip,
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Button,
    Modal,
    message,
    Icon,
    Divider,
    Table,
    Steps
} from 'antd';
import data from "../../../common/nav";
import orderManage from "../../../models/orderManage";


// const order_id =this.props.location.query.order_id;
const FormItem = Form.Item;
const Step = Steps.Step;
const AuthButton = powerControl(Button);

@connect((state) => ({
    orderManage: state.orderManage,
}))
@Form.create()
class OrderDetails extends Component {


    state = {
        imageUrl: '',
        orderManage: [],
        order_id: '',
        order_status: '',
        shipping_status: '',
        order_sn: '',
        consignee: '',
        order_amount: '',
        user_name: '',
        shipping_name: '',
        pay_name: '',
        pay_status: '',
        pay_time: '',
        add_time: '',
        shipping_time: '',
        email: '',
        best_time: '',
        address: '',
        zipcode: '',
        tel: '',
        sign_building: '',
        integral_money: '',
        money_paid: '',
        shipping_fee: '',
        bonus: '',
        goods_amount: '',
        confirm_time:'',
        oga_text:[],
        handleInfo:'',
        record:{},
    };

    componentDidMount() {

        // const FormData = this.props;
        const record = this.props.location.state.record;

        this.setState({
            record:record,
        })


        if (record) {
            const order_id =record.order_id;
            const user_name =record.user_name;
            const order_status =record.order_status;
            const shipping_status =record.shipping_status;
            const order_sn =record.order_sn;
            const consignee =record.consignee;
            const address =record.address;
            const mobile =record.mobile;
            const email =record.email;
            const pay_name =record.pay_name;
            const order_amount =record.order_amount;
            const shipping_name =record.shipping_name;
            const pay_status =record.pay_status;
            const pay_time =record.pay_time;
            const best_time =record.best_time;
            const add_time =record.add_time;
            const goods_amount =record.goods_amount;
            const zipcode =record.zipcode;
            const tel =record.tel;
            const integral_money =record.integral_money;
            const bonus =record.bonus;
            const sign_building =record.sign_building;
            const shipping_fee =record.shipping_fee;
            const money_paid =record.money_paid;
            const confirm_time=record.confirm_time;
            const shipping_time=record.shipping_time;
            this.setState({
                    bonus: bonus,
                    sign_building : sign_building,
                    goods_amount : goods_amount,
                    integral_money : integral_money,
                    shipping_fee : shipping_fee,
                    money_paid : money_paid,
                    best_time : best_time,
                    zipcode : zipcode,
                    tel : tel,
                    consignee : consignee,
                    order_id : order_id,
                    email : email,
                    pay_status : pay_status,
                    user_name : user_name,
                    order_sn : order_sn,
                    order_status : order_status,
                    pay_name : pay_name,
                    shipping_status : shipping_status,
                    address : address,
                    mobile : mobile,
                    add_time : add_time,
                    pay_time : pay_time,
                    shipping_time : shipping_time,
                    confirm_time:confirm_time,
                    order_amount : order_amount,
        })
            // this.state.bonus = bonus;
            // this.state.sign_building = sign_building;
            // this.state.goods_amount = goods_amount;
            // this.state.integral_money = integral_money;
            // this.state.shipping_fee = shipping_fee;
            // this.state.money_paid = money_paid;
            // this.state.integral_money = integral_money;
            // this.state.best_time = best_time;
            // this.state.zipcode = zipcode;
            // this.state.tel = tel;
            // this.state.consignee = consignee;
            // this.state.order_id = order_id;
            // this.state.email = email;
            // this.state.pay_status = pay_status;
            // this.state.user_name = user_name;
            // this.state.order_sn = order_sn;
            // this.state.order_status = order_status;
            // this.state.shipping_name = shipping_name;
            // this.state.pay_name = pay_name;
            // this.state.shipping_status = shipping_status;
            //
            // this.state.address = address;
            // this.state.mobile = mobile;
            // this.state.add_time = add_time;
            // this.state.pay_time = pay_time;
            // this.state.shipping_time = shipping_time;
            // this.state.order_amount = order_amount;
            this.props.dispatch({
                type:'orderManage/queryOgaTextAndOptionInfo',
                payload:{order_id:order_id},
                callback:(response)=>{
                    if(response.result===0){
                        if(response.resultData.ogaText[0]){
                            this.setState({
                                oga_text:response.resultData.ogaText[0].oga_text,
                                confirm_time:response.resultData.ogaText[0].confirm_time,
                                shipping_time:response.resultData.ogaText[0].shipping_time,
                                pay_time:response.resultData.ogaText[0].pay_time,
                            })
                        }
                    }
                }
            })

            this.props.dispatch({
                type: 'orderManage/querySingle',
                payload: {order_id: order_id},
                callback: (response) => {
                    if (response.result === 0) {
                        this.setState({
                            orderManage: response.resultData.orderManage.list,
                        })

                    }
                }
            });
        } else {
            const {dispatch} = this.props;
            dispatch(routerRedux.push('/order/orderManage'));
        }
    }

    handleOrderDetailsChange = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            order_id:this.state.order_id,
            ...formValues,
        };

        dispatch({
            type: 'orderManage/querySingle',
            payload: params,
        });
    }


    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    }

    handleSubmit = (order_id, e) => {


        this.props.form.validateFieldsAndScroll((err, values) => {

            this.props.dispatch({
                type: `orderManage/modStatus`,
                payload: {...values, order_id: order_id},
                callback: (response) => {
                    if (response.result === 0) {
                        message.success('提交成功');
                        this.props.handleModalVisible(false);
                        this.props.handleModalSuccess(this.props.pagination);
                    } else {
                        message.success('提交失败');
                    }
                }
            });

        });
    }
    handleReturn = () => {
        const {dispatch} = this.props;
        // this.props.dispatch({
        //     type: 'orderManage/fetch',
        //
        // });
        dispatch(routerRedux.push('/order/orderManage'));

    }
    handleClick=(actionType)=>{
        const {dispatch,form}=this.props;
        const {order_status,shipping_status,pay_status}=this.state;
        form.validateFields((err, fieldValue) => {
            if (err) return;
            const values={
                ...fieldValue,
                actionType:actionType,
                order_id:this.state.order_id,
                user_id:JSON.parse(localStorage.getItem("userInfoState")).userInfo.user_id,
                order_status:order_status,
                shipping_status:shipping_status,
                pay_status:pay_status,
            }
            if(actionType==='BH'){//备货
                values["shipping_status"]="备货中";
            }else if(actionType==='FH'){//发货
                values["shipping_status"]="已发货";
            }else if(actionType==='TH'){//退货
                values["shipping_status"]="退货";
            }else if(actionType==='OK'){//确认
              values["order_status"]="确认";
            }else if(actionType==='CLOSE'){//关闭
              values["order_status"]="已取消";
            }

            dispatch({
                type:'orderManage/changeStatus',
                payload:values,
                callback:(response)=>{
                    if(response.result===0){
                        message.success("成功")
                        dispatch({
                            type:"orderManage/keepData",
                            payload:this.state,
                        })
                        this.props.dispatch(routerRedux.push('/order/optionResult'));
                    }else{
                        message.error("失败")
                    }
                }
            })
        });

    }

    render() {


        const {optionInfoData}=this.props.orderManage;

        const {orderManage:{data}} = this.props;
        const {submitting, record, form, pagination} = this.props;
        const {getFieldDecorator, getFieldValue} = form;
        const { order_status,pay_status,add_time,pay_time,shipping_time,confirm_time,oga_text,shipping_status}=this.state;
       console.log(pay_status)
        const columns = [{
            title: '商品',
            dataIndex: 'goods_img',
            render: (val, record) => {
                return <Tooltip placement="right" title={record.goods_img}>
                    <img src={`${constants.imageUrlFix}${val}`} style={{width: 50, height: 50}}/>
                    {/*<span>{val}</span>*/}
                </Tooltip>
            }
        }, {
            title: '商品名称', dataIndex: 'goods_name',
            render: (val, record) => {
                return <Tooltip placement="right" title={record.goods_name}>
                    <span>{val}</span>
                </Tooltip>
            }
        }, {
            title: '价格', dataIndex: 'goods_price',
            render: (val, record) => {
                return <Tooltip placement="right" title={record.goods_price}>
                    <span>{val}</span>
                </Tooltip>
            }
        }, {
            title: '数量', dataIndex: 'goods_number',
            render: (val, record) => {
                return <Tooltip placement="right" title={record.goods_number}>
                    <span>{val}</span>
                </Tooltip>
            }
        }]


        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };
        const paginationProps = {
            showQuickJumper: true,
            showSizeChanger: true,
            ...data.pagination,
        };


        return (
            <PageHeaderLayout title="订单详情">
                <Card title="流程进度" bordered={false} bodyStyle={{overflow: 'auto', height: '60%', marginBottom: '10px'}}>
                    <Steps direction="horizontal" progressDot={true}>
                        <Step title="提交订单" status="finish" description={add_time}/>
                        <Step title="支付订单" status={this.state.pay_status=='已付款'?"finish":"wait"} description={this.state.pay_status=='已付款'?pay_time:"未付款"}/>
                        <Step title="商家发货" status={shipping_time?"finish":"wait"} description={shipping_time?shipping_time:""}/>
                        <Step title="确认收货" status={confirm_time?"finish":"wait"} description={confirm_time?confirm_time:""}/>
                        <Step title="评价" status={oga_text?"finish":"wait"}/>
                    </Steps>
                </Card>
                <Card bordered={false} bodyStyle={{overflow: 'auto', height: '60%', marginBottom: '10px'}}>
                    <Divider>订单信息</Divider>
                    <Row >
                        <Col span={6}>订单号：{this.state.order_sn}</Col>
                        <Col span={6}>购买人：{this.state.user_name}</Col>
                        <Col span={6}>配送方式：{this.state.shipping_name}</Col>
                        <Col span={6}>支付方式：{this.state.pay_name}</Col>
                    </Row>
                    <Row>
                        <Col span={6}></Col>
                        <Col
                            span={6}>订单状态：{this.state.order_status},{this.state.shipping_status},{this.state.pay_status}</Col>
                        <Col span={6}>下单时间：{this.state.add_time}</Col>
                        <Col span={6}>发货时间：{this.state.shipping_time}</Col>
                    </Row>


                </Card>


                <Card bodyStyle={{overflow: 'auto', height: '60%', marginBottom: '10px'}}>
                    <Divider>商品信息</Divider>
                    <Table
                        dataSource={data.list}
                        columns={columns}
                        pagination={paginationProps}
                        onChange={this.handleOrderDetailsChange}
                    />
                </Card>

                <Card bodyStyle={{overflow: 'auto', height: '60%', marginTop: '10px'}}>
                    <Divider>收货人信息</Divider>
                    <Row >
                        <Col span={6}>收货人：{this.state.consignee}</Col>
                        <Col span={6}>手机号码：{this.state.tel}</Col>
                        <Col span={6}>送货时间：{this.state.best_time}</Col>
                        <Col span={6}>收货地址：{this.state.address}</Col>
                    </Row>
                    <Row >
                        <Col span={6}>电子邮件：{this.state.email}</Col>
                        <Col span={6}>电话号码：{this.state.mobile}</Col>
                        <Col span={6}>地址别名：{this.state.sign_building}</Col>
                        <Col span={6}>邮政编码：{this.state.zipcode}</Col>
                    </Row>
                </Card>

                <Card bodyStyle={{overflow: 'auto', height: '60%', marginTop: '10px'}}>
                    <Divider>费用信息</Divider>
                    <Row >
                        <Col span={8}>订单总金额：￥{this.state.goods_amount}</Col>
                        <Col span={8}>使用红包金额：￥{this.state.bonus}</Col>
                        {/*<Col span={6}>使用积分金额：￥{this.state.integral_money}</Col>*/}
                        {/*<Col span={6}>已付款金额：￥{this.state.money_paid}</Col>*/}
                        <Col span={8}>配送费用：￥{this.state.shipping_fee}</Col>
                        {/*<Col span={8}>使用余额：无</Col>*/}
                    </Row>
                    <Row >
                        <Col span={8}>使用积分金额：￥{this.state.integral_money}</Col>
                        <Col span={8}>使用优惠券：无</Col>
                        <Col span={8}>应付款金额：￥{this.state.order_amount}</Col>
                    </Row>
                </Card>


                <Card bordered={false} bodyStyle={{overflow: 'auto', height: '60%', marginTop: '10px'}}>
                    <Divider>操作</Divider>
                    <div>
                        <div>
                            <Form onSubmit={this.handleSubmit}
                                  hideRequiredMark
                            >
                                <FormItem
                                    {...formItemLayout}
                                    label="操作备注"
                                >
                                    {getFieldDecorator('action_note')(
                                        <Input.TextArea/>
                                    )}
                                </FormItem>

                                {/*<FormItem*/}
                                {/*{...formItemLayout}*/}
                                {/*label="订单状态"*/}
                                {/*>*/}
                                {/*{getFieldDecorator('order_status', {*/}
                                {/*initialValue: this.state.order_status,*/}

                                {/*})(*/}
                                {/*<Select placeholder="请选择" style={{width: '100%'}}>*/}
                                {/*<Option value="">请选择</Option>*/}
                                {/*<Option value="0">未确认</Option>*/}
                                {/*<Option value="1">确认</Option>*/}
                                {/*<Option value="2">已取消</Option>*/}
                                {/*<Option value="3">无效</Option>*/}
                                {/*<Option value="4">退货</Option>*/}
                                {/*</Select>*/}
                                {/*)}*/}
                                {/*</FormItem>*/}
                                {/*<FormItem*/}
                                {/*{...formItemLayout}*/}
                                {/*label="配送情况"*/}
                                {/*>*/}
                                {/*{getFieldDecorator('shipping_status', {*/}
                                {/*initialValue: this.state.shipping_status,*/}
                                {/*})(*/}
                                {/*<Select placeholder="请选择" style={{width: '100%'}}>*/}
                                {/*<Option value="">请选择</Option>*/}
                                {/*<Option value="0">未发货</Option>*/}
                                {/*<Option value="1">已发货</Option>*/}
                                {/*<Option value="2">已收货</Option>*/}
                                {/*<Option value="3">退货</Option>*/}
                                {/*</Select>*/}
                                {/*)}*/}
                                {/*</FormItem>*/}
                                <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                                    <AuthButton auth="orderDetail.readyGood" type="danger" disabled={order_status=='未确认'&&pay_status=='已付款'?false:true} onClick={()=>this.handleClick("OK")}>确认</AuthButton >
                                    <AuthButton auth="orderDetail.readyGood" type="danger" disabled={pay_status=='未付款'&&shipping_status=='未发货'&&order_status!='已取消'?false:true} onClick={()=>this.handleClick("CLOSE")}>关闭</AuthButton >
                                    <AuthButton auth="orderDetail.readyGood" type="danger" disabled={order_status=='确认'&&pay_status=='已付款'?shipping_status=='未发货'?false:true:true} onClick={()=>this.handleClick("BH")}>配货</AuthButton >
                                    <AuthButton auth="orderDetail.sendGood" style={{marginLeft: 8}} disabled={shipping_status=='备货中'?false:true}  type="danger" onClick={()=>this.handleClick("FH")}>发货</AuthButton >
                                    {/*<Button style={{marginLeft: 8}} type="danger" onClick={()=>this.handleClick("TH")}>退货</Button>*/}
                                    <Button style={{marginLeft: 8}} onClick={this.handleReturn}>返回</Button>
                                </FormItem>
                            </Form>
                        </div>
                        <div>
                            <OptionInfo
                                data={optionInfoData}
                            />
                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )

    }


}

export default OrderDetails;
